<script>
export default {
  name: "YiZhanComponent",
  data(){
    return{

        edpictureurl:'',
        pictureurl:'',
        fileList:[],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      //page对象
      page:{
        pageSize:10,
        currentPage:1,
        total:100
      },
      //搜索框数据模型
      searchContent:{

        time:[],
        pageNum:1,
        pageSize:10,
        courierStationName:'',
        name:'',
        courierStationStatus:''
      },
      //表单数据模型
      tableData:[],
      index:'',
      row:{},
      //对话框数据模型
      from:{
            title1:'',
            detail:'',
            title:'',
          //富文本
          text:'',
          simplyintroduce:'',
          //知识图片
          picture:'',
          //知识标题
          name:'',

          //知识简介

        //驿站名字
        courierStationName:'',
        //详细地址
        courierStationAddress:'',
        //二级地址
        courierStationCity:'',
        //这个是要传的小区id
        courierStationCommunityId:'',
        //三级地址
        courierStationDistrict:'',
        //上传图片
        courierStationImage:'',
        //一级地址
        courierStationProvince:'',
        //所在小区
        community:[],
        communityName:'',
        //三级联动数据模型
        addressAll:[],
        address:[],
        //模式
        mode:1
      },
      //小区选项数据模型
      xiaoQuOption:[],
      formLabelWidth: '120px',

      dialogFormVisible:false,
        dialogFormVisible1:false,
    }
  },
  computed:{
    getCommunityName(){
      return this.tableData.courierStationProvince+this.tableData.courierStationCity+this.tableData.courierStationDistrict+this.tableData.courierStationAddress+'';
    }
  },
  methods:{

      //展示富文本内容
      detail(row){
          this.dialogFormVisible1 = true
          this.axios.get('http://localhost:8080/Heartknowledge/selectText',{
              params:{
                  id:row.id
              }
          }).then((res)=>{
              //处理响应数据

              console.log(res.data)
              //真正需要的数据
              //将得到的数据加载到tableData
              this.from.detail=res.data;

          }).catch(err=>{})
      },
      showImg(){
        this.axios
      },

      uploadImg(resp){
          console.log(resp.data)
          this.from.picture= resp.data
          console.log(this.from.picture)
      },
      //上传
      handleRemove(file) {

          this.fileList = [];
          this.edpictureurl = '';
      },
      handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          console.log(this.dialogImageUrl)
          this.dialogVisible = true;
      },
      handleDownload(file) {
          console.log(file);
      },

//
    //搜索框
    searchClick(){
      this.axios.get('http://localhost:8080/Heartknowledge/selectByName',
          {
            params:{
              //传输的参数
                name:this.searchContent.name===undefined?'':this.searchContent.name,
                pageNum:this.searchContent.pageNum===undefined?'':this.searchContent.pageNum,
                pageSize:this.searchContent.pageSize===undefined?'':this.searchContent.pageSize,
                startTime:this.searchContent.time[0]===undefined?'':this.formatDateTime(this.searchContent.time[0]),
                endTime:this.searchContent.time[1]===undefined?'':this.formatDateTime(this.searchContent.time[1]),

            }
          }
      ).then((res)=>{
        //处理响应数据
          console.log(res)
          console.log(res.data)
        //真正需要的数据
        //将得到的数据加载到tableData
        this.tableData=res.data;

      }).catch(err=>{})
    },
    //格式化日期函数
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },


    //初始化刷新表格数据
    flushTable(){
        console.log("flush")
      this.axios.get('http://localhost:8080/Heartknowledge/selectAll',{
          params:{
              pageNum:1,
              pageSize:10
          }
          }
      ).then((res)=>{

        //处理响应数据
        console.log(res.data);
        //真正需要的数据

        // 将得到的数据加载到tableData
        this.tableData=res.data;
        // this.page.total=res.data.data.total;
      }).catch(err=>{})
    },
    //添加驿站按钮触发
    addZhiShi(){
          this.from.title="添加知识"
      this.dialogFormVisible=true;
        console.log(this.searchContent.time[0])
        console.log(this.searchContent.time[1])
    },

    getXiaoQuOption(){
        console.log("111")
      this.axios.get("http://localhost:8080/Heartknowledge/selectAll",{
          params:{
              pageNum:1,
              pageSize:10,
          }
      }).then((res) => {
          console.log(res)
          this.tableData=res.data;


          }).catch(err=>{
            console.log("获取小区列表失败")});
          },

      putForm(){
      //TODO:验证id传输是否成功
      // console.log(this.from.courierStationCommunityId);
      //增加操作
      if (this.from.mode===1) {
          console.log(777)
          this.axios.post("http://localhost:8080/Heartknowledge/insert", {

              name: this.from.name,
              simplyintroduce: this.from.simplyintroduce,
              picture: this.from.picture,
              text: this.from.text
          }).then((res) => {
              this.dialogFormVisible = false;
              this.clearFrom();
              this.flushTable();

          }).catch((err) => {
              console.log("增加失败")
          })

      }else if (this.from.mode===2) {
          console.log("换行")
          if(this.fileList == null){
              this.fileList.push('');
          }
          //修改
          this.axios.put('http://localhost:8080/Heartknowledge/updateById',{

                  id: this.from.id,
                  name: this.from.name,
                  simplyintroduce: this.from.simplyintroduce,
                  picture: this.from.picture,
                  text: this.from.text,

              //上传的新名字
              }
          ).then((res) => {
              this.from.mode = 1;
              console.log(this.fileList)
              this.dialogFormVisible = false;
              this.clearFrom();
              this.flushTable();
              console.log("修改了吗")
          }).catch((err) => {
              console.log("修改失败")
          })
      }

    },
      //清空对话框
      clearFrom(){
          this.from.name='';
          this.from.simplyintroduce='';
          this.from.picture='';
          this.from.text='';
          this.fileList='';
      },

      //编辑
      handleEdit(row){
          console.log(this.from.picture)
          console.log(this.fileList)
          console.log(this.from.picture),
          this.fileList = [];
          this.from.name=row.name;
          this.from.id =row.id;
          this.from.simplyintroduce=row.simplyintroduce;
          this.edpictureurl = row.picture
          this.pictureurl= 'http://localhost:8080/Heartknowledge/down?filename='  + row.picture
          this.from.text=row.text;
          console.log(this.pictureurl)

          if(this.fileList == ""){
              if(row.picture != ''){
                  this.fileList.push({
                      'url':  this.pictureurl
                  });
              }

          }
          console.log(this.row.id);

          // this.dialogDataShow();
          this.from.title="编辑知识"
          this.dialogFormVisible=true;
          this.from.mode=2;
      },
      //删除
      shanchu(index, row){
          console.log(row.id)

          this.axios.delete('http://localhost:8080/Heartknowledge/deleteById', {
              params: {
                  id: row.id
              }
          }).then((res)=>{
              //处理响应数据
              this.flushTable();
          }).catch(err=>{})
      },

      //对话框数据回显
      dialogDataShow(){
          this.from.name=this.row.name;
          this.from.simplyintroduce=this.row.simplyintroduce;

          this.from.text=this.row.text;
          if(this.fileList == ''){
              this.fileList.push({'url': row.picture});
          }
      },
      //页面底部导航
      nextClick(){//点击下一页
          this.page.currentPage++;
          this.axios.get('http://localhost:8080/Heartknowledge/selectAll',
              {
                  params:{
                      pageNum:this.page.currentPage,
                      pageSize:this.page.pageSize,

                  }
              }
          ).then((res)=>{
              // console.log(response)
              //更新表格数据
              this.tableData=res.data;

          }).catch(err=>{});
      },
      prevClick(){//点击上一页
          this.page.currentPage--;
          this.axios.get('http://localhost:8080/Heartknowledge/selectAll',
              {
                  params:{
                      pageNum:this.page.currentPage,
                      pageSize:this.page.pageSize,

                  }
              }
          ).then((res)=>{
              // console.log(response)
              //更新表格数据
              this.tableData=res.data;
          }).catch(err=>{});
      },
      currentChange(currentPage){//点击任意页码
          console.log(currentPage);
          this.page.currentPage=currentPage;
          this.axios.get('http://localhost:8080/Heartknowledge/selectAll',
              {
                  params:{
                      pageNum:this.page.currentPage,
                      pageSize:this.page.pageSize,

                  }
              }
          ).then((res)=>{
              console.log(res)
              //更新表格数据
              this.tableData=res.data;

          }).catch(err=>{});
      },


  },


  created() {
    this.flushTable();
    // this.getAllProvinceAndCityList();


      this.getXiaoQuOption();
  }
}
</script>

<template>
<div class="yizhan">
    <div>
        // 心理知识 -------------
    </div>
  <!--  搜索框-->
  <div class="searchAndDate cf">
    <div class="search">
      <span>知识标题：</span>
      <el-input v-model="searchContent.name" placeholder="请输入内容"  class="searchInputSize"></el-input>
    </div>

    <div class="date">
      <span>添加时间：</span>
      <el-date-picker
          v-model="searchContent.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
  </div>

<!--    查看详情弹框-->
    <el-dialog :title="from.title1" :visible.sync="dialogFormVisible1">
        <el-form :model="from">
            <!--      驿站名字-->
            <el-form-item label="知识详情" :label-width="formLabelWidth" >
                <br>

                    <div v-html="from.detail"></div>
            </el-form-item>
        </el-form>
    </el-dialog>

  <!--  添加驿站弹框-->
  <el-button type="primary" @click="addZhiShi">添加知识</el-button>

  <el-dialog :title="from.title" :visible.sync="dialogFormVisible">
    <el-form :model="from">
      <!--      驿站名字-->
      <el-form-item label="知识标题" :label-width="formLabelWidth">
        <el-input v-model="from.name" autocomplete="off"></el-input>
      </el-form-item>

        <el-form-item label="知识简介" :label-width="formLabelWidth">
            <el-input v-model="from.simplyintroduce" autocomplete="off"></el-input>
        </el-form-item>
      <!--      驿站图片    上传时就应该保存一下他的名字-->
      <el-form-item label="知识图片" :label-width="formLabelWidth">
          <el-upload

                  name="file"

                  :file-list="fileList"
                  action="http://localhost:8080/Heartknowledge/upload"
                  list-type="picture-card"
                  :auto-upload="true"
                    :on-success="uploadImg">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                  <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

<!--          以上是缩略图片代码-->
      </el-form-item>
      <!--        所属地区-->

        <!--        此处添加富文本-->
        <el-form-item label="text"  :label-width="formLabelWidth" >
            <quill-editor
                    class='ql-editor'
                    v-model="from.text"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                    @ready="onEditorReady($event)"
            style="height: 500px;">

            </quill-editor>
        </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="putForm">确 定</el-button>
    </div>
  </el-dialog>
<!--  表格-->
  <div class="formTable">
    <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{'text-align': 'center',backgroundColor: '#1890ff',color:'#fff'}"
        :cell-style="{'text-align': 'center'}"
    >

<!--  表格数据    -->
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="标题"
          width="180">
      </el-table-column>
      <el-table-column
          prop="simplyintroduce"
          label="简介">
      </el-table-column>
<!--        图片回显-->
      <el-table-column
          label="图片">
          <template slot-scope="scope">
              <el-image
                      style="width: 100px; height: 100px"
                      :src="'http://localhost:8080/Heartknowledge/down?filename='+scope.row.picture"
                      fit="fill"></el-image>
          </template>
      </el-table-column>
      <el-table-column
          prop="text"
          label="内容">
          <template slot-scope="scope">
              <div v-html="scope.row.text"></div>
          </template>

      </el-table-column>
        <el-table-column
                prop="createtime"
                label="创建时间">
        </el-table-column>


      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="text"
                    @click="detail(scope.row)">查看内容</el-button>
            <el-button
                    size="mini"
                    type="text"
                    @click="shanchu(scope.$index, scope.row)">删除</el-button>
          <el-button
              v-if="scope.row.courierStationStatus===1"
              size="mini"
              type="text"
              @click="changeStatus(scope.$index, scope.row)">查看详情</el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>

<!--  分页查询-->
  <div class="block">
    <el-pagination
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.currentPage"
        @next-click="nextClick"
        @prev-click="prevClick"
        @current-change="currentChange"
    >
    </el-pagination>
  </div>

</div>
</template>

<style scoped>
.search{
  width: 320px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}
.date{
  width: 430px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}
.searchInputSize{
  box-sizing: border-box;
  width: 200px;
  height: 36px;
  padding: 0 15px;
}
.searchAndDate{
  margin-top: 30px;
}

    .dialog-footer{
        margin-top: 60px;
    }
</style>